<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
  </head>
  <body>
    <div id="app">
      <div>
        F1键：
        <input @keydown.f1="printMsg('keydown f1')" />
      </div>
      <div>
        F1键并且阻止默认事件：
        <input @keydown.prevent.f1="printMsg('keydown prevent f1')" />
      </div>
      <div>
        回车：
        <textarea @keydown.prevent.enter="printMsg('keydown enter')"></textarea>
      </div>
      <div>
        <!-- 直接使用 KeyboardEvent.key 暴露的按键名称作为修饰符，但需要转为 kebab-case 形式 -->
        page-down：
        <textarea
          @keydown.prevent.page-down="printMsg('keydown prevent page-down')"
        ></textarea>
      </div>
      <div>
        完全自定义：
        <textarea @keydown.prevent="custom"></textarea>
      </div>
    </div>

    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

    <script>
      const { createApp, ref } = Vue;

      /*
      Vue中常用的按键别名：
        回车 => enter
        删除 => delete (捕获“删除”和“退格”键)
        退出 => esc
        空格 => space
        换行 => tab (特殊，必须配合keydown去使用)
        上 => up
        下 => down
        左 => left
        右 => right
      */
      const app = createApp({
        setup() {
          function printMsg(...args) {
            console.log(args);
          }

          function custom(e) {
            // key: "Enter", code: "Enter"
            // key: "Enter", code: "NumpadEnter"
            // key: "5", code: "Numpad5"
            // key: "PageDown", code: "PageDown"
            console.log(e);
            if (e.key === "5") {
              console.log("按下了数字 5");
            } else if (e.key === "PageDown") {
              console.log("按下了 PageDown");
            }
          }

          return {
            printMsg,
            custom,
          };
        },
      });

      app.mount("#app");
    </script>
  </body>
</html>
